<template>
    <div>
        <h1>我是TS组件语法</h1>
        <h2>{{ sum }}</h2>
        <button @click="sum_n()">点击我，增加值</button>
    </div>
</template>

<script lang="ts" setup>
import {type PersonInter } from '@/types';
import Person from './Person.vue';
import {ref, reactive,onBeforeMount,onMounted, onBeforeUpdate, onUpdated } from 'vue';

// 数据
let sum=ref(0);

// 方法
function sum_n(){
    sum.value+=1;
}
let person:PersonInter={id:'ast',name:'张三',age:60};
// let personList=reactive<PersonInter>([
//     {id:'ast1',name:'张三',age:1},
//     {id:'ast2',name:'李四',age:2},
//     {id:'ast3',name:'王五',age:3}
// ]);

let personL:PersonInter[]=reactive([
    {id:'ast1',name:'张三',age:1},
    {id:'ast2',name:'李四',age:2},
]
)

// 创建
console.log('创建')

// 挂载
onBeforeMount(()=>{
    console.log('挂载前');
});

// 挂载完毕
onMounted(()=>{
    console.log('挂载完毕')
})

// 更新前
onBeforeUpdate(()=>{
    console.log('更新前')
})

// 更新完毕
onUpdated(()=>{
    console.log('更新完毕')
})
</script>